<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增在职人员分析')"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
    <th:block th:include="include :: bootstrap-select-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

</style>
<body>
<div class="wrapper wrapper-content   ibox-content" id="dv">
    <form class="form-horizontal m" id="empOnJob-edit" AUTOCOMPLETE="OFF">
        <input th:value="${data.id}" id="id" name="id" class="form-control" type="hidden"/>
        <h4 class="form-header h4">基本信息</h4>
        <div class="form-group">
            <div class="col-sm-12">

                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">单位：</label>
                    <div class="col-sm-8">
                        <select name="compId" id="compId" class="form-control noselect2" disabled>
                            <option value="">请选择</option>
                            <option th:each="pro:${userComp}"
                                    th:selected="${data.compId==pro.compId}"
                                    th:value="${pro.compId}"
                                    th:text="${pro.compName}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月末人数：</label>
                    <div class="col-sm-8">
                        <input th:value="${data.monthEndNum}" id="monthEndNum" name="monthEndNum" class="form-control"
                               type="text" disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">年份：</label>
                    <div class="col-sm-8">
                        <input th:value="${data.years}" id="years" name="years" class="form-control" type="text"
                               disabled>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月份：</label>
                    <div class="col-sm-8">
                        <input th:value="${data.months}" id="months" name="months" class="form-control" type="text"
                               disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">高层管理：</label>
                    <div class="col-sm-8">
                        <input id="highNum" th:value="${data.highNum}" name="highNum" class="form-control" type="number"
                               placeholder="请输入高层管理人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="highProportion" th:value="${data.highProportion}" name="highProportion"
                               class="form-control"
                               type="text" disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">中层管理：</label>
                    <div class="col-sm-8">
                        <input id="middleNum" th:value="${data.middleNum}" name="middleNum" class="form-control"
                               type="number"
                               placeholder="请输入中层管理人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="middleProportion" th:value="${data.middleProportion}" name="middleProportion"
                               class="form-control" type="text" disabled
                        >
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">基层管理：</label>
                    <div class="col-sm-8">
                        <input id="basicNum" th:value="${data.basicNum}" name="basicNum" class="form-control"
                               type="number"
                               placeholder="请输入基层管理人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="basicProportion" th:value="${data.basicProportion}" name="basicProportion"
                               class="form-control" type="text" disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">工人：</label>
                    <div class="col-sm-8">
                        <input id="workerNum" th:value="${data.workerNum}" name="workerNum" class="form-control"
                               type="number"
                               placeholder="请输入工人人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4  control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="workerProportion" th:value="${data.workerProportion}" name="workerProportion"
                               class="form-control" type="text" disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">后勤(不含保安)：</label>
                    <div class="col-sm-8">
                        <input id="logisticsNum" th:value="${data.logisticsNum}" name="logisticsNum"
                               class="form-control"
                               type="number"
                               placeholder="请输入后勤人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="logisticsProportion" th:value="${data.logisticsProportion}"
                               name="logisticsProportion"
                               class="form-control" type="text"
                               disabled>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">性别结构</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">男：</label>
                    <div class="col-sm-8">
                        <input id="maleNum" th:value="${data.maleNum}" name="maleNum" class="form-control" type="number"
                               placeholder="请输入男性数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">女：</label>
                    <div class="col-sm-8">
                        <input id="femaleNum" th:value="${data.femaleNum}" name="femaleNum" class="form-control"
                               type="number"
                               placeholder="请输入女性数" required>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">工龄结构</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">＜1年：</label>
                    <div class="col-sm-8">
                        <input id="oneYearLowerNum" th:value="${data.oneYearLowerNum}" name="oneYearLowerNum"
                               class="form-control" type="number"
                               placeholder="请输入1年以下人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="oneYearLowerProportion" th:value="${data.oneYearLowerProportion}"
                               name="oneYearLowerProportion"
                               class="form-control"
                               type="text" disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">1年≥~＜3年：</label>
                    <div class="col-sm-8">
                        <input id="oneThreeNum" th:value="${data.oneThreeNum}" name="oneThreeNum" class="form-control"
                               type="number"
                               placeholder="请输入1年≥~＜3年人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="oneThreeProportion" th:value="${data.oneThreeProportion}" name="oneThreeProportion"
                               class="form-control" type="text"
                               disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">3年≥~＜5年：</label>
                    <div class="col-sm-8">
                        <input id="threeFiveNum" th:value="${data.threeFiveNum}" name="threeFiveNum"
                               class="form-control"
                               type="text"
                               placeholder="请输入3年≥~＜5年人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="threeFiveProportion" th:value="${data.threeFiveProportion}"
                               name="threeFiveProportion"
                               class="form-control" type="text"
                               disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">5年≥~＜10年：</label>
                    <div class="col-sm-8">
                        <input id="fiveTenNum" th:value="${data.fiveTenNum}" name="fiveTenNum" class="form-control"
                               type="number"
                               placeholder="请输入5年≥~＜10年人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="fiveTenProportion" th:value="${data.fiveTenProportion}" name="fiveTenProportion"
                               class="form-control" type="text"
                               disabled>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">10年≥：</label>
                    <div class="col-sm-8">
                        <input id="tenYearUpperNum" th:value="${data.tenYearUpperNum}" name="tenYearUpperNum"
                               class="form-control" type="number"
                               placeholder="请输入10年≥人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="tenYearUpperProportion" th:value="${data.tenYearUpperProportion}"
                               name="tenYearUpperProportion"
                               class="form-control"
                               type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">年龄结构</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">＜30岁：</label>
                    <div class="col-sm-8">
                        <input id="twentyThirtyAgeNum" th:value="${data.twentyThirtyAgeNum}" name="twentyThirtyAgeNum"
                               class="form-control" type="number"
                               placeholder="请输入＜30岁人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="twentyThirtyAgeProportion" th:value="${data.twentyThirtyAgeProportion}"
                               name="twentyThirtyAgeProportion" class="form-control"
                               type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">30岁≥~＜40岁：</label>
                    <div class="col-sm-8">
                        <input id="thirtyFortyAgeNum" th:value="${data.thirtyFortyAgeNum}" name="thirtyFortyAgeNum"
                               class="form-control" type="number"
                               placeholder="请输入30岁≥~＜40岁人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="thirtyFortyAgeProportion" th:value="${data.thirtyFortyAgeProportion}"
                               name="thirtyFortyAgeProportion"
                               class="form-control"
                               type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">40岁≥~＜50岁：</label>
                    <div class="col-sm-8">
                        <input id="fortyFiftyAgeNum" th:value="${data.fortyFiftyAgeNum}" name="fortyFiftyAgeNum"
                               class="form-control" type="number"
                               placeholder="请输入40岁≥~＜50岁人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="fortyFiftyAgeProportion" th:value="${data.fortyFiftyAgeProportion}"
                               name="fortyFiftyAgeProportion"
                               class="form-control"
                               type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">≥50岁：</label>
                    <div class="col-sm-8">
                        <input id="fiftyUpperAgeNum" th:value="${data.fiftyUpperAgeNum}" name="fiftyUpperAgeNum"
                               class="form-control" type="number"
                               placeholder="请输入≥50岁以上人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="fiftyUpperAgeProportion" th:value="${data.fiftyUpperAgeProportion}"
                               name="fiftyUpperAgeProportion"
                               class="form-control"
                               type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">学历结构</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">高中及以下(含中专)：</label>
                    <div class="col-sm-8">
                        <input id="highLowerSchoolNum" th:value="${data.highLowerSchoolNum}" name="highLowerSchoolNum"
                               class="form-control" type="number"
                               placeholder="请输入高中及以下人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="highLowerSchoolProportion" th:value="${data.highLowerSchoolProportion}"
                               name="highLowerSchoolProportion" class="form-control"
                               type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">大专：</label>
                    <div class="col-sm-8">
                        <input id="juniorCollegeSchoolNum" th:value="${data.juniorCollegeSchoolNum}"
                               name="juniorCollegeSchoolNum"
                               class="form-control"
                               type="number"
                               placeholder="请输入大专人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="juniorCollegeSchoolProportion" th:value="${data.juniorCollegeSchoolProportion}"
                               name="juniorCollegeSchoolProportion"
                               class="form-control" type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">本科：</label>
                    <div class="col-sm-8">
                        <input id="undergraduateSchoolNum" th:value="${data.undergraduateSchoolNum}"
                               name="undergraduateSchoolNum"
                               class="form-control"
                               type="number"
                               placeholder="请输入本科人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="undergraduateSchoolProportion" th:value="${data.undergraduateSchoolProportion}"
                               name="undergraduateSchoolProportion"
                               class="form-control" type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">本科及以上：</label>
                    <div class="col-sm-8">
                        <input id="undergraduateUpperSchoolNum" th:value="${data.undergraduateUpperSchoolNum}"
                               name="undergraduateUpperSchoolNum" class="form-control"
                               type="number"
                               placeholder="请输入本科及以上人数" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">占比：</label>
                    <div class="col-sm-8">
                        <input id="undergraduateUpperSchoolProportion"
                               th:value="${data.undergraduateUpperSchoolProportion}"
                               name="undergraduateUpperSchoolProportion"
                               class="form-control" type="text" disabled
                               required>
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>
<script type="text/javascript">
    var prefix = ctx + 'empOnJob';
    var monthEndNum = 0;//月末人数
    var highProportion;//高层管理占比
    var middleProportion;//中层管理占比
    var basicProportion;//基础管理占比
    var workerProportion;//工人占比
    var logisticsProportion;//后勤占比
    var oneYearLowerProportion;//1年以下占比
    var oneThreeProportion;//1-3年占比
    var threeFiveProportion;//3-5年占比
    var fiveTenProportion;//5-10年占比
    var tenYearUpperProportion;//10年以上占比
    var twentyLowerAgeProportion;//20以下占比
    var twentyThirtyAgeProportion;//20-30占比
    var thirtyFortyAgeProportion;//30-40占比
    var fortyFiftyAgeProportion;//40-50占比
    var fiftyUpperAgeProportion;//50以上占比
    var highLowerSchoolProportion;//高中及以下占比
    var juniorCollegeSchoolProportion;//大专占比
    var undergraduateSchoolProportion;//本科占比
    var undergraduateUpperSchoolProportion;//本科以上占比
    var peopleSum;//基本信息人数合计
    var sexSum;//性别人数合计
    var workingSum;//工龄人数合计
    var ageSum;//年龄结构人数合计
    var educationSum;//学历结构人数合计
    $(function () {
        monthEndNum = $("#monthEndNum").val();
        $("input").blur(function () {
            highProportion = (Number($("#highNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            middleProportion = (Number($("#middleNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            basicProportion = (Number($("#basicNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            workerProportion = (Number($("#workerNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            logisticsProportion = (Number($("#logisticsNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            oneYearLowerProportion = (Number($("#oneYearLowerNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            oneThreeProportion = (Number($("#oneThreeNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            threeFiveProportion = (Number($("#threeFiveNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            fiveTenProportion = (Number($("#fiveTenNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            tenYearUpperProportion = (Number($("#tenYearUpperNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            twentyLowerAgeProportion = (Number($("#twentyLowerAgeNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            twentyThirtyAgeProportion = (Number($("#twentyThirtyAgeNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            thirtyFortyAgeProportion = (Number($("#thirtyFortyAgeNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            fortyFiftyAgeProportion = (Number($("#fortyFiftyAgeNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            fiftyUpperAgeProportion = (Number($("#fiftyUpperAgeNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            highLowerSchoolProportion = (Number($("#highLowerSchoolNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            juniorCollegeSchoolProportion = (Number($("#juniorCollegeSchoolNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            undergraduateSchoolProportion = (Number($("#undergraduateSchoolNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            undergraduateUpperSchoolProportion = (Number($("#undergraduateUpperSchoolNum").val()) / monthEndNum * 100).toFixed(2) + '%';
            $("#highProportion").val(highProportion);
            $("#middleProportion").val(middleProportion);
            $("#basicProportion").val(basicProportion);
            $("#workerProportion").val(workerProportion);
            $("#logisticsProportion").val(logisticsProportion);
            $("#oneYearLowerProportion").val(oneYearLowerProportion);
            $("#oneThreeProportion").val(oneThreeProportion);
            $("#threeFiveProportion").val(threeFiveProportion);
            $("#fiveTenProportion").val(fiveTenProportion);
            $("#tenYearUpperProportion").val(tenYearUpperProportion);
            $("#twentyLowerAgeProportion").val(twentyLowerAgeProportion);
            $("#twentyThirtyAgeProportion").val(twentyThirtyAgeProportion);
            $("#thirtyFortyAgeProportion").val(thirtyFortyAgeProportion);
            $("#fortyFiftyAgeProportion").val(fortyFiftyAgeProportion);
            $("#fiftyUpperAgeProportion").val(fiftyUpperAgeProportion);
            $("#highLowerSchoolProportion").val(highLowerSchoolProportion);
            $("#juniorCollegeSchoolProportion").val(juniorCollegeSchoolProportion);
            $("#undergraduateSchoolProportion").val(undergraduateSchoolProportion);
            $("#undergraduateUpperSchoolProportion").val(undergraduateUpperSchoolProportion);

        })
    })

    function validform(formId) {
        return $(formId).validate()
    }

    function submitHandler() {
        peopleSum = Number($("#highNum").val()) + Number($("#middleNum").val()) + Number($("#basicNum").val()) + Number($("#workerNum").val()) + Number($("#logisticsNum").val());
        sexSum = Number($("#maleNum").val()) + Number($("#femaleNum").val());
        workingSum = Number($("#oneYearLowerNum").val()) + Number($("#oneThreeNum").val()) + Number($("#threeFiveNum").val()) + Number($("#fiveTenNum").val()) + Number($("#tenYearUpperNum").val());
        ageSum=Number($("#twentyThirtyAgeNum").val()) + Number($("#thirtyFortyAgeNum").val())+Number($("#fortyFiftyAgeNum").val()) + Number($("#fiftyUpperAgeNum").val());
        educationSum=Number($("#highLowerSchoolNum").val()) + Number($("#juniorCollegeSchoolNum").val())+Number($("#undergraduateSchoolNum").val()) + Number($("#undergraduateUpperSchoolNum").val());
        if (validform("#empOnJob-edit").form()) {
            if (peopleSum != monthEndNum) {
                alert("请检查 高层、中层、基层、工人、后勤人数是否等于月末人数！");
                return false
            }
            if (sexSum != monthEndNum) {
                alert("请检查性别结构人数是否等于月末人数！");
                return false
            }
            if (workingSum!=monthEndNum) {
                alert("请检查工龄结构人数是否等于月末人数！");
                return false
            }if (ageSum!=monthEndNum) {
                alert("请检查年龄结构人数是否等于月末人数！");
                return false
            }if (educationSum!=monthEndNum) {
                alert("请检查学历结构人数是否等于月末人数！");
                return false
            }
            else {
                $("input").removeAttr('disabled');
                $("select").removeAttr('disabled');
                var data = $("#empOnJob-edit").serializeArray();
                $.operate.save(prefix + "/edit", data);
            }
            //parent.sums();
        }
    }
</script>
</body>
</html>